<template>
  <div class="zong1">
    <div class="toptitle">点位数据</div>
    <!-- 上侧一些选择器和输入框，按钮 -->
    <div class="topselect">
      <el-select
        v-model="Tableval"
        class="m-1"
        placeholder="温湿度传感器"
        size="small"
      >
        <el-option
          v-for="item in TableType.data"
          :key="item.val"
          :label="item.name"
          :value="item.key"
        />
      </el-select>
      <div class="topselect2">
        <el-select
          v-model="place"
          class="m-2"
          placeholder="请选择设备位置"
          size="small"
        >
          <el-option
            v-for="item in placelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="ifonline"
          class="m-2"
          placeholder="全部在线/离线状态"
          size="small"
        >
          <el-option
            v-for="item in ifonlinelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="alertzt"
          class="m-2"
          placeholder="全部警报状态"
          size="small"
        >
          <el-option
            v-for="item in alertztlist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="devicename"
          class="m-2"
          placeholder="请输入设备名称"
          style="width: 300px"
          size="small"
        >
        </el-input>
        <el-button type="primary" size="small" class="m-3" @click="exportExcel"
          >下载</el-button
        >
        <!-- <el-button type="primary" size="small" class="m-3" @click="prints">打印</el-button> -->
      </div>
    </div>

    <!-- 温湿度的表格 -->
    <el-table
      id="table"
      border
      height="600px"
      :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
      v-show="Tableval == 'mst'"
      :row-style="{ height: '56px' }"
      :row-class-name="tableRowClassName"
      style="width: 97%; margin-left: 23px; background: #f5f7fa"
      :header-cell-style="{
        'text-align': 'center',
        background: '#B4C7E7',
        color: '#333333',
        height: '50px',
      }"
      :cell-style="{
        'text-align': 'center',
        // background: '#f5f8fb',
      }"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="key" label="设备ID" align="center" />
      <!-- width="200" -->
      <el-table-column prop="name" label="设备位置" align="center" />
      <!-- width="300" -->
      <!-- <el-button type="info" :icon="Message" circle /> -->
      <!-- <el-button type="danger" :icon="Delete" circle /> -->
      <el-table-column label="在线状态" align="center">
        <!-- width="267" -->
        <template #default="scope">
          <div class="rgz">
            <el-tag v-if="scope.row.diff < 60" type="success">在线</el-tag>
            <el-tag v-else class="ml-2" type="info">离线</el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="a3" label="在线状态" width="80" align="center"/> -->
      <el-table-column prop="a4" label="警报状态" align="center">
        <!-- width="300" -->
        <template #default>
          <div class="rgz">
            正常
            <!-- <div v-if="scope.row.influenceType == '1'">在线</div>
            <div v-if="scope.row.influenceType == '0'">离线</div> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="temperature" label="温度" align="center" />
      <!-- width="230" -->
      <el-table-column label="湿度" align="center">
        <template #default="scope">
          <div>
            <span>{{ parseInt(scope.row.humidity) }}%</span>
          </div>
        </template>
      </el-table-column>
      <!-- width="230" -->
      <el-table-column prop="urgencyType" label="电量" align="center" />
      <!-- width="230" -->
    </el-table>
    <!-- 温度表格 -->
    <el-table
      id="table"
      border
      :row-class-name="tableRowClassName"
      height="600px"
      :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
      v-show="Tableval == 'tmp'"
      :row-style="{ height: '56px' }"
      style="width: 97%; margin-left: 23px; background: #f5f7fa"
      :header-cell-style="{
        'text-align': 'center',
        background: '#B4C7E7',
        color: '#333333',
        height: '50px',
      }"
      :cell-style="{
        'text-align': 'center',
        // background: '#f5f8fb',
      }"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column prop="key" label="设备ID" align="center" />
      <el-table-column prop="name" label="设备名称" align="center" />
      <!-- width="240" -->
      <!-- width="250" -->
      <!-- <el-button type="info" :icon="Message" circle /> -->
      <!-- <el-button type="danger" :icon="Delete" circle /> -->
      <el-table-column label="在线状态" align="center">
        <!-- width="255" -->
        <template #default="scope">
          <div class="rgz">
            <el-tag v-if="scope.row.diff < 60" type="success">在线</el-tag>
            <el-tag v-else type="info">离线</el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="a3" label="在线状态" width="80" align="center"/> -->
      <el-table-column prop="a4" label="警报状态" align="center">
        <!-- width="254" -->
        <template #default>
          <div class="rgz">正常</div>
        </template>
      </el-table-column>
      <el-table-column prop="temperature" label="温度" align="center" />
      <!-- width="380" -->
      <el-table-column
        prop="flow"
        label="电量"
        align="center"
      /><!--width="380"-->
    </el-table>
    <!-- 压力表格 -->
    <el-table
      :row-class-name="tableRowClassName"
      id="table"
      border
      height="600px"
      :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
      v-show="Tableval == 'ylq'"
      :row-style="{ height: '56px' }"
      style="width: 97%; margin-left: 23px; background: #f5f7fa"
      :header-cell-style="{
        'text-align': 'center',
        background: '#B4C7E7',
        color: '#333333',
        height: '50px',
      }"
      :cell-style="{
        'text-align': 'center',
        // background: '#f5f8fb',
      }"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column prop="name" label="设备名称" align="center" />
      <!-- width="240" -->
      <el-table-column prop="urgencyType" label="设备位置" align="center" />
      <!-- width="240" -->
      <!-- <el-button type="info" :icon="Message" circle /> -->
      <!-- <el-button type="danger" :icon="Delete" circle /> -->
      <el-table-column label="在线状态" align="center">
        <!-- width="240" -->
        <template #default="scope">
          <div class="rgz">
            <el-tag v-if="scope.row.diff < 60" type="success">在线</el-tag>
            <el-tag v-else type="info">离线</el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="a3" label="在线状态" width="80" align="center"/> -->
      <el-table-column prop="a4" label="警报状态" align="center">
        <!-- width="240"  -->
        <template #default>
          <div class="rgz">
            <!-- <div v-if="scope.row.influenceType == '1'">在线</div>
            <div v-if="scope.row.influenceType == '0'">离线</div> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="flow" label="压力" align="center" />
      <!-- width="375" -->
      <el-table-column prop="problemDescription" label="电量" align="center" />
      <!-- width="375" -->
    </el-table>
    <!-- 流量计 -->
    <el-table
      :row-class-name="tableRowClassName"
      id="table"
      border
      height="600px"
      :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
      v-show="Tableval == 'flw'"
      :row-style="{ height: '56px' }"
      style="width: 97%; margin-left: 23px; background: #f5f7fa"
      :header-cell-style="{
        'text-align': 'center',
        background: '#B4C7E7',
        color: '#333333',
        height: '50px',
      }"
      :cell-style="{
        'text-align': 'center',
        // background: '#f5f8fb',
      }"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column prop="name" label="设备名称" align="center" />
      <!-- width="240" -->
      <el-table-column prop="urgencyType" label="设备位置" align="center" />
      <!-- width="240" -->
      <!-- <el-button type="info" :icon="Message" circle /> -->
      <!-- <el-button type="danger" :icon="Delete" circle /> -->
      <el-table-column label="在线状态" align="center">
        <!-- width="240" -->
        <template #default="scope">
          <div class="rgz">
            <el-tag v-if="scope.row.diff < 60" type="success">在线</el-tag>
            <el-tag v-else type="info">离线</el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="a3" label="在线状态" width="80" align="center"/> -->
      <el-table-column prop="a4" label="警报状态" align="center">
        <!-- width="240"  -->
        <template #default>
          <div class="rgz">
            正常
            <!-- <div v-if="scope.row.influenceType == '1'">在线</div>
            <div v-if="scope.row.influenceType == '0'">离线</div> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="flow" label="流量" align="center" />
    </el-table>
    <!-- 电表表格 -->
    <el-table
      :row-class-name="tableRowClassName"

      id="table"
      border
      height="600px"
      :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
      v-show="Tableval == 'vlt'"
      :row-style="{ height: '56px' }"
      style="width: 97%; margin-left: 23px; background: #f5f7fa"
      :header-cell-style="{
        'text-align': 'center',
        background: '#B4C7E7',
        color: '#333333',
        height: '50px',
      }"
      :cell-style="{
        'text-align': 'center',
        // background: '#f5f8fb',
      }"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="key" label="设备ID" align="center" />
      <el-table-column prop="name" label="设备名称" align="center" />
      <!-- width="240" -->
      <el-table-column prop="addr" label="设备位置" align="center" />
      <!-- width="240" -->
      <!-- <el-button type="info" :icon="Message" circle /> -->
      <!-- <el-button type="danger" :icon="Delete" circle /> -->
      <el-table-column label="在线状态" align="center">
        <!-- width="240" -->
        <template #default="scope">
          <div class="rgz">
            <el-tag v-if="scope.row.diff < 60" type="success">在线</el-tag>
            <el-tag v-else type="info">离线</el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="a3" label="在线状态" width="80" align="center"/> -->
      <el-table-column prop="a4" label="警报状态" align="center">
        <!-- width="240" -->
        <template #default>
          <div class="rgz">正常</div>
        </template>
      </el-table-column>
      <el-table-column prop="power" label="功率" align="center" />
      <!-- width="250" -->
      <el-table-column prop="problemDescription" label="电流" align="center" />
      <!-- width="250" -->
      <el-table-column prop="energy" label="累计电量" align="center" />
      <!-- width="250" -->
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage"
        :small="true"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { getDeviceList } from "@/api/model/echarts";
import { ref, watch, onMounted, reactive } from "vue";
import FileSaver from "file-saver";
import * as XLSX from "xlsx/dist/xlsx.mini.min.js";
const currentPage = ref(1);
const Tableval = ref("mst");
const TableType = reactive({
  data: [
    {
      val: 0,
      name: "温湿度传感器",
      key: "mst",
    },
    {
      val: 1,
      name: "温度传感器",
      key: "tmp",
    },
    {
      val: 2,
      name: "压力传感器",
      key: "ylq",
    },
    {
      val: 3,
      name: "电表",
      key: "vlt",
    },
    {
      val: 4,
      name: "流量计",
      key: "flw",
    },
  ],
});
//初始化页面获取数据
const tableRowClassName = ({ row, rowIndex }) => {
  console.log(row);
  if (rowIndex % 2 == 0) {
    return "warning-row";
  } else {
    return "success-row";
  }
};
const getdata = async (key) => {
  let res = await getDeviceList(key);
  tableData.value = res.data;
  total.value = tableData.value.length;
};
const total = ref(0);
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
// 改变表格
function exportExcel() {
  //需给表格定义一个id或者类名
  console.log("1111111111", XLSX);
  let wb = XLSX.utils.table_to_book(document.querySelector("#table"));
  console.log("222");
  let wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      "111.xlsx"
    ); //***是自己导出文件时的命名，随意
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}
onMounted(() => {
  getdata("mst");
});
var tableData = ref([]);
var place = ref("");
const placelist = [];
var ifonline = ref("");
const ifonlinelist = [];
var alertzt = ref("");
const alertztlist = [];
var devicename = ref("");
watch(place, (newValue) => {
  alert(newValue);
});
watch(ifonline, (newValue) => {
  alert(newValue);
});
watch(alertzt, (newValue) => {
  alert(newValue);
});
watch(devicename, (newValue) => {
  alert(newValue);
});
watch(Tableval, (Val) => {
  getdata(Val);
});
</script>
<style scoped lang="less">
.zong1 {
  width: 100%;
  min-height: 800px;
  height: auto !important;
  background: white;
}
/deep/.warning-row {
  background: #fff;
}
/deep/.success-row {
  background: #f5f7fa;
}
.lie {
  background: red;
}
.dell {
  font-size: 13px;
  color: #fccb56;
  cursor: pointer;
}
.m-1 {
  margin-top: 20px;
  margin-left: 25px;
}
.el-table__cell {
  padding: 0 !important;
}
.edit {
  margin-right: 30px;
  font-size: 13px;
  color: #606fa6;
  cursor: pointer;
}
.topselect {
  display: flex;
  justify-content: space-between;
}
.topselect1 {
  padding-left: 25px;
  line-height: 60px;
}
.page {
  margin-left: 1350px;
  margin-top: 10px;
}
.topselect2 {
  padding-right: 30px;
  line-height: 60px;
}

.el-table .cell {
  padding: 0;
}

.m-2 {
  margin-left: 20px;
  width: 150px;
}

.m-3 {
  width: 80px;
  margin-left: 15px;
  /* background: #8faadc; */
}

.toptitle {
  padding-left: 30px;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #4d62a5;
  border-bottom: 2px solid #d9deec;
  padding-bottom: 10px;
}

.el-table .el-table__cell {
  background: #f5f7fa;
}

.demo-pagination-block {
  float: right;
  margin-right: 80px;
  margin-top: 8px;
}

.redy {
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  background: red;
  margin-left: 40px;
}

.greeny {
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  background: #0db459;
  margin-left: 40px;
}

.rgz {
  text-align: center;
}
</style>